<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram of a Launcher in a Ring</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    background-color: #ffffff;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="500"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // Parameters
  const cx = canvas.width / 2;
  const cy = canvas.height / 2;
  const R = 180; // Radius of the large ring
  const lineWidth = 2;

  // --- 1. Draw the large ring (大圆环) ---
  ctx.beginPath();
  ctx.arc(cx, cy, R, 0, 2 * Math.PI);
  ctx.lineWidth = lineWidth;
  ctx.strokeStyle = 'black';
  ctx.stroke();

  // --- 2. Draw the center dot ---
  ctx.beginPath();
  ctx.arc(cx, cy, 4, 0, 2 * Math.PI);
  ctx.fillStyle = '#333333';
  ctx.fill();

  // --- 3. Draw the launcher (发射装置 P) ---
  // The object is a segment on the inner side of the ring.
  // We define its shape with an inner arc, an outer arc, and connecting sides.
  const r_in = R - 35;      // Inner radius of the object P
  const r_out = R;          // Outer radius of the object P (flush with the ring)
  const A = -Math.PI / 2;   // Center angle for P's position (top of the circle)
  const d_angle_total = 0.4;  // Half angular width of the base of P
  const d_angle_top = 0.25;   // Half angular width of the top arc of P

  const top_start_angle = A - d_angle_top;
  const top_end_angle = A + d_angle_top;
  const bottom_start_angle = A - d_angle_total;
  const bottom_end_angle = A + d_angle_total;

  ctx.beginPath();
  // Move to the start point of the top arc (top-left of the shape)
  ctx.moveTo(cx + r_out * Math.cos(top_start_angle), cy + r_out * Math.sin(top_start_angle));
  // Draw the top arc along the main ring
  ctx.arc(cx, cy, r_out, top_start_angle, top_end_angle, false);
  // Draw the line to the bottom-right corner
  ctx.lineTo(cx + r_in * Math.cos(bottom_end_angle), cy + r_in * Math.sin(bottom_end_angle));
  // Draw the bottom arc
  ctx.arc(cx, cy, r_in, bottom_end_angle, bottom_start_angle, true);
  // closePath connects the last point to the first point, drawing the left side
  ctx.closePath();
  ctx.lineWidth = lineWidth;
  ctx.strokeStyle = 'black';
  ctx.stroke();

  // --- 4. Draw the labels ---
  ctx.fillStyle = 'black';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  // Calculate a consistent vertical position for the labels inside the launcher
  const text_y = cy - R + 60;

  // Label "P"
  ctx.font = '32px "Times New Roman"';
  ctx.fillText('P', cx, text_y);

  // Label "尾" (Tail)
  ctx.font = '32px "KaiTi", "SimSun"'; // Use a common font for Chinese characters with a brush-like style
  ctx.fillText('尾', cx - 80, text_y);

  // Label "头" (Head)
  ctx.font = '32px "KaiTi", "SimSun"';
  ctx.fillText('头', cx + 80, text_y);

</script>
</body>
</html>